<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-input size="small" placeholder="合同编号" v-model.trim="form.factory_contract_no" style="width: 250px" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.supplier_id" filterable remote placeholder="输入搜索的工厂名称" size="small"
                               :remote-method="searchFactoryBtn" :loading="searchLoading" clearable :disabled="user.source_from=='gc'">
                        <el-option v-for="(item,index) in factoryList" :label="item.factory_name" :value="item.supplier_id" :key="index">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.status" placeholder="审核状态" size="small" style="width: 120px" clearable>
                        <el-option :value=0 label="未提交"></el-option>
                        <el-option :value=1 label="审核中"></el-option>
                        <el-option :value=2 label="已通过"></el-option>
                        <el-option :value=3 label="已拒绝"></el-option>
                        <el-option :value=4 label="已作废"></el-option>
                        <el-option :value=5 label="已撤回"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.b_status" placeholder="签署状态" size="small" style="width: 120px" clearable>
                        <el-option :value=-1 label="未发起"></el-option>
                        <el-option :value=0 label="签署中"></el-option>
                        <el-option :value=1 label="已签署"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-popover placement="bottom" width="450" trigger="click">
                        <el-form label-width="90px" label-position="left">
                            <el-form-item label="品牌类型">
                                <el-select v-model="form.brand_code" placeholder="品牌" size="small" style="width: 80%" clearable>
                                    <el-option value="S" label="十三余"></el-option>
                                    <el-option value="Y" label="有香"></el-option>
                                    <el-option value="XM" label="一弦一木"></el-option>
                                    <el-option value="J" label="锦瑟"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="加工单号">
                                <el-input size="small" v-model.trim="form.processing_code" placeholder="加工单" style="width: 80%;" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="合同生成">
                                <el-select v-model="form.s_status" placeholder="合同生成" size="small" style="width: 80%" clearable>
                                    <el-option :value=0 label="未生成"></el-option>
                                    <el-option :value=1 label="已生成"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <el-button slot="reference" size="small" type="warning" plain>更多</el-button>
                    </el-popover>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" @click="searchBtn" size="small" :loading="btnLoading">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading" size="mini">
                <el-table-column label="品牌" prop="brand_name" width="80"></el-table-column>
                <el-table-column label="合同编号" prop="factory_contract_no" width="160"></el-table-column>
                <el-table-column label="工厂" prop="factory_name" show-overflow-tooltip></el-table-column>
                <el-table-column label="加工单号" prop="processing_code" width="180">
                    <template slot-scope="{row}">
                        <el-popover placement="right" width="150" trigger="hover">
                            <el-row>
                                <div v-for="(value,index) in row.processing_code" v-if="row.processing_code.length>0" :key="index">
                                    <el-tag  size="mini" style="margin: 0 4px 4px 0;">
                                        {{value}}
                                    </el-tag>
                                </div>
                            </el-row>
                            <div slot="reference" class="ellipsis">
                                <el-tag v-for="(value,index) in row.processing_code" v-if="row.processing_code.length>0" :key="index" size="mini" style="margin-right:3px;">
                                    {{value}}
                                </el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="合同金额" prop="contract_amount" width="90"></el-table-column>
                <el-table-column label="总件数" prop="total_num" width="80"></el-table-column>
                <el-table-column label="违约赔偿" prop="fine_amount" width="90">
                    <template slot-scope="{ row }">
                        <el-button v-if="row.fine_amount>0" size="mini" type="text" @click="linkTo('soa_fine', row.factory_contract_no)">{{ row.fine_amount }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="额外费用" prop="additional_amount" width="90">
                    <template slot-scope="{ row }">
                        <el-button v-if="row.additional_amount>0" size="mini" type="text" @click="linkTo('soa_extra', row.factory_contract_no)">{{ row.additional_amount }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="审核状态" prop="status" width="80">
                    <template slot-scope="{ row }">
                        <el-tag size="mini" type="info" v-if="row.status==0">未提交</el-tag>
                        <el-tag size="mini" type="warning" v-else-if="row.status==1">审核中</el-tag>
                        <el-tag size="mini" type="success" v-else-if="row.status==2">已通过</el-tag>
                        <el-tag size="mini" type="danger" v-else-if="row.status==3">未通过</el-tag>
                        <el-tag size="mini" type="info" v-else-if="row.status==4">已作废</el-tag>
                        <el-tag size="mini" type="info" v-else-if="row.status==5">已撤回</el-tag>
                        <el-tag size="mini" v-else>审核中</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="签署状态" prop="b_status" width="80">
                    <template slot-scope="{ row }">
                        <el-tag size="mini" type="info" v-if="row.b_status==-1">未发起</el-tag>
                        <el-tag size="mini" type="warning" v-else-if="row.b_status==0">签署中</el-tag>
                        <el-tag size="mini" type="success" v-else-if="row.b_status==1">已签署</el-tag>
                        <el-tag size="mini" type="danger" v-else>{{row.b_status}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="合同时间" prop="contract_date" width="130"></el-table-column>
                <el-table-column label="理单员" prop="order_processor" width="90"></el-table-column>
                <el-table-column label="申请" width="140" fixed="right" v-if="user.source_from == 'fs'">
                    <template slot-scope="{ row }">
                        <el-button type="text" size="mini" @click="applyBtn('fine', row)"
                                   :disabled="!((row.status==2||[0,1].includes(row.b_status)) && nodeActions.includes('apply'))">违约赔偿</el-button>
                        <el-button type="text" size="mini" @click="applyBtn('extra', row)"
                                   :disabled="!((row.status==2||[0,1].includes(row.b_status)) && nodeActions.includes('apply'))">额外费用</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="180" v-if="user.source_from == 'fs'">
                    <template slot-scope="{ row }">
                        <el-button class="el-icon-view" type="text" size="mini" @click="detailBtn(row)" :disabled="row.status==4">&nbsp;查看</el-button>
                        <el-button type="text" size="mini" @click="submitContractBtn(row)" :disabled="!([0, 3, 5].includes(row.status) && nodeActions.includes('edit'))">提交</el-button>&nbsp;
                        <el-dropdown trigger="hover" style="font-size: 12px;" @command="dropdownBtn($event, row)">
                            <span style="cursor: pointer;color: #409EFF;">
                                更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="APPROVAL" icon="el-icon-time"
                                                  :disabled="!(row.run_id)">审批进度</el-dropdown-item>
                                <el-dropdown-item command="PDF" icon="el-icon-coordinate"
                                                  :disabled="!(row.fileid)">合同附件</el-dropdown-item>
                                <el-dropdown-item command="EQB" icon="el-icon-position"
                                                  :disabled="!(row.fileid && nodeActions.includes('push'))">发送签署</el-dropdown-item>
                                <el-dropdown-item command="CANCEL" icon="el-icon-delete"
                                                  :disabled="!([0,1,3,5].includes(row.status) && nodeActions.includes('cancel'))">作 废</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="80" v-else>
                    <template slot-scope="{ row }">
                        <el-button class="el-icon-view" type="text" size="mini" @click="detailBtn(row)" :disabled="row.status==4">&nbsp;查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;float: right;">
                <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
            </div>
        </el-col>

        <!--审核进度-->
        <el-drawer title="合同审批" :visible.sync="approvalVisible" size="650px" direction="rtl" :wrapperClosable="false" :before-close="closeBtn">
            <process-contract v-if="approvalVisible" :runId="runId" :id="contractId"></process-contract>
        </el-drawer>

        <!--查看详情-->
        <el-drawer title="合同详情" :visible.sync="detailVisible" size="1200px" direction="rtl" :wrapperClosable="false" :before-close="closeBtn">
            <el-row style="padding-left: 20px;">
                <div style="margin-top: 0px;">
                    <svg t="1717659283335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9445" width="16" height="16"><path d="M407.466667 477.866667h-277.333334C93.866667 477.866667 64 448 64 409.6v-277.333333c0-36.266667 29.866667-66.133333 66.133333-66.133334h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133334v277.333333c2.133333 38.4-27.733333 68.266667-66.133333 68.266667zM132.266667 108.8c-12.8 0-25.6 10.666667-25.6 25.6v277.333333c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333333c0-12.8-10.666667-25.6-25.6-25.6h-277.333333zM407.466667 960h-277.333334C93.866667 960 64 930.133333 64 893.866667v-277.333334c0-36.266667 29.866667-66.133333 66.133333-66.133333h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM132.266667 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z m618.666666-110.933333c-17.066667 0-34.133333-6.4-46.933333-19.2L563.2 320c-12.8-12.8-19.2-29.866667-19.2-46.933333s6.4-34.133333 19.2-46.933334L704 83.2c12.8-12.8 29.866667-19.2 46.933333-19.2 17.066667 0 34.133333 6.4 46.933334 19.2l140.8 140.8c12.8 12.8 19.2 29.866667 19.2 46.933333 0 17.066667-6.4 34.133333-19.2 46.933334l-138.666667 142.933333c-12.8 12.8-29.866667 19.2-49.066667 19.2z m0-373.333333c-6.4 0-12.8 2.133333-17.066666 6.4l-140.8 140.8c-4.266667 4.266667-6.4 10.666667-6.4 17.066666 0 6.4 2.133333 12.8 6.4 17.066667l140.8 140.8c4.266667 4.266667 10.666667 6.4 17.066666 6.4 6.4 0 12.8-2.133333 17.066667-6.4l140.8-140.8c4.266667-4.266667 6.4-10.666667 6.4-17.066667 0-6.4-2.133333-12.8-6.4-17.066666L768 113.066667c-4.266667-4.266667-8.533333-6.4-17.066667-6.4z m138.666667 853.333333h-277.333333c-36.266667 0-66.133333-29.866667-66.133334-66.133333v-277.333334c0-36.266667 29.866667-66.133333 66.133334-66.133333h277.333333c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM614.4 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z" fill="#1E87EB" p-id="9446"></path></svg>
                    <span style="font-size: 16px;font-weight: bold;vertical-align: bottom;margin-left: 4px;">加工单列表</span>
                    <div style="display: inline-block;float: right">
                        <el-tag size="mini" type="info" v-if="detail.status==0">未提交</el-tag>
                        <el-tag size="mini" type="warning" v-else-if="detail.status==1">待审核</el-tag>
                        <el-tag size="mini" type="success" v-else-if="detail.status==2">已通过</el-tag>
                        <el-tag size="mini" type="danger" v-else-if="detail.status==3">未通过</el-tag>
                        <el-tag size="mini" type="info" v-else-if="detail.status==4">已作废</el-tag>
                        <el-tag size="mini" type="info" v-else-if="detail.status==5">已撤回</el-tag>
                        <el-tag size="mini" v-else-if="detail.status==6">签署中</el-tag>
                        <el-tag size="mini" type="success" v-else-if="detail.status==7">签署完成</el-tag>
                        &nbsp;&nbsp;
                        <span style="font-size: 13px;font-weight: bold">工厂名称：<span style="color: #909399">{{detail.factory_name}}</span></span>
                        &nbsp;&nbsp;&nbsp;
                        <span style="font-size: 13px;font-weight: bold">合同编号：<span style="color: #909399">{{detail.factory_contract_no}}</span></span>
                        &nbsp;&nbsp;&nbsp;
                        <span style="font-size: 13px;font-weight: bold">合同金额：<span style="color: #ff7171">{{detail.contract_amount}}</span></span>
                        &nbsp;&nbsp;&nbsp;
                        <span style="font-size: 13px;font-weight: bold">额外费用：<span style="color: #ff7171;">{{detail.additional_amount}}</span></span>
                        &nbsp;&nbsp;&nbsp;
                        <span style="font-size: 13px;font-weight: bold">违约赔偿：<span style="color: #E6A23C;">{{detail.fine_amount}}</span></span>
                        &nbsp;&nbsp;&nbsp;
                        <span style="font-size: 13px;font-weight: bold">总件数：<span style="color: #67C23A;">{{detail.total_num}}</span></span>
                        &nbsp;&nbsp;&nbsp;
                    </div>
                </div>
                <el-table :data="detail.processing_code_list" size="mini" border :header-cell-style="{ background: '#F3F4F7', color: '#555' }"
                          :max-height="drawHeight" style="width: 99%;">
                    <el-table-column prop="processing_code" label="生产加工单"></el-table-column>
                    <el-table-column prop="type_no" label="款号"></el-table-column>
                    <el-table-column prop="type_name" label="款名" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="jy_number" label="巨益采购单号" width="140"></el-table-column>
                    <el-table-column prop="verify_price_number" label="大货核价编码"></el-table-column>
                    <el-table-column prop="unit_price" label="单价" width="90"></el-table-column>
                    <el-table-column prop="countnum" label="件数" width="80"></el-table-column>
                    <el-table-column prop="countprice" label="总金额"></el-table-column>
                    <el-table-column prop="add_date" label="运营下单时间" width="100"></el-table-column>
                </el-table>
            </el-row>
        </el-drawer>

        <!--申请违约赔偿-->
        <el-drawer title="申请违约赔偿" :visible.sync="fineVisible" size="600px" direction="rtl" :wrapperClosable="false" :before-close="closeBtn">
            <el-row style="padding-left: 20px;padding-bottom:20px;overflow-y:auto;" :style="{'height': drawHeight}">
                <el-form :rules="applyFormRule" :model="applyForm" label-position="left" label-width="90px">
                    <el-form-item label="合同编号">
                        <el-input size="small" :value="applyForm.factory_contract_no" style="width: 90%" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="工厂名称">
                        <el-input size="small" :value="applyForm.factory_name" style="width: 90%" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="款号" prop="type_no">
                        <el-select v-model="applyForm.type_no" placeholder="请选择款号" size="small" style="width: 90%">
                            <el-option v-for="(value,index) in typeNo" :label="value" :value="value" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="赔偿原因" prop="reason">
                        <el-select size="small" v-model="applyForm.reason" style="width: 90%">
                            <el-option value="逾期" label="逾期"></el-option>
                            <el-option value="其他" label="其他"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="赔偿金额" prop="amount">
                        <el-input size="small" v-model.trim="applyForm.amount" type="number" style="width: 90%" placeholder="请输入违约赔偿金额"></el-input>
                    </el-form-item>
                    <el-form-item label="赔偿备注" prop="remarks">
                        <el-input size="small" v-model.trim="applyForm.remarks" type="textarea" :row="2" style="width: 90%" placeholder="请输入违约赔偿备注"></el-input>
                    </el-form-item>
                    <el-form-item label="上传凭证" prop="images">
                        <el-upload action="/api/tool/fileImport" list-type="picture-card"
                                   :headers="uploadHeaders"
                                   :data="uploadData"
                                   :file-list="this.applyForm.images"
                                   :on-success="(res, file, fileList)=>uploadSuccessHandle(res, fileList)"
                                   :before-upload="beforeUploadHandle">
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                                <img class="el-upload-list__item-thumbnail" :src="file.url" />
                                <span class="el-upload-list__item-actions">
<!--                        <span class="el-upload-list__item-preview" @click="previewImgBtn(file)">-->
                                    <!--                          <i class="el-icon-zoom-in"></i>-->
                                    <!--                        </span>-->
                        <span class="el-upload-list__item-delete" @click="delImgBtn(file)">
                          <i class="el-icon-delete"></i>
                        </span>
                    </span>
                            </div>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </el-row>
            <div style="width: 100%;position: absolute;bottom: 10px;padding: 8px;border-top: 1px #ebeef5 solid;">
                <el-button type="primary" @click="closeBtn" plain>退出</el-button>
                <el-button type="primary" @click="submitFineBtn" :loading="btnLoading">{{btnLoading ? "申请中..." : "确认"}}</el-button>
            </div>
        </el-drawer>

        <!--申请额外费用-->
        <el-drawer title="申请额外费用" :visible.sync="extraVisible" size="600px" direction="rtl" :wrapperClosable="false" :before-close="closeBtn">
            <el-row style="padding-left: 20px;padding-bottom:20px;overflow-y:auto;" :style="{'height': drawHeight}">
                <el-form :rules="applyFormRule" :model="applyForm" label-position="left" label-width="90px">
                    <el-form-item label="合同编号">
                        <el-input size="small" :value="applyForm.factory_contract_no" style="width: 90%" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="工厂名称">
                        <el-input size="small" :value="applyForm.factory_name" style="width: 90%" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="款号" prop="type_no">
                        <el-select v-model="applyForm.type_no" placeholder="请选择款号" size="small" style="width: 90%">
                            <el-option v-for="(value,index) in typeNo" :label="value" :value="value" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="用途" prop="purpose">
                        <el-select size="small" v-model="applyForm.purpose" style="width: 90%" placeholder="请选择用途">
                            <el-option value="修色费" label="修色费"></el-option>
                            <el-option value="包缸染色费" label="包缸染色费"></el-option>
                            <el-option value="水洗固色色费" label="水洗固色色费"></el-option>
                            <el-option value="运输费" label="运输费"></el-option>
                            <el-option value="维修费（更换吊牌洗标）" label="维修费（更换吊牌洗标）"></el-option>
                            <el-option value="其他" label="其他"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="单价" prop="price">
                        <el-input size="small" v-model.trim="applyForm.price" @change="priceChange" type="number" style="width: 90%" placeholder="请输入单价"></el-input>
                    </el-form-item>
                    <el-form-item label="数量" prop="num">
                        <el-input size="small" v-model.trim="applyForm.num" @change="priceChange" type="number" style="width: 90%" placeholder="请输入数量"></el-input>
                    </el-form-item>
                    <el-form-item label="税率" prop="tax_rate">
                        <el-input size="small" v-model.trim="applyForm.tax_rate" @change="priceChange" type="number" style="width: 90%" placeholder="请输入税率">
                            <template slot="append">%</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="总价" prop="amount">
                        <el-input size="small" :value="applyForm.amount" type="number" style="width: 90%" placeholder="总价" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="remarks">
                        <el-input size="small" v-model.trim="applyForm.remarks" type="textarea" :row="2" style="width: 90%" placeholder="请输入违约赔偿备注"></el-input>
                    </el-form-item>
                    <el-form-item label="上传凭证" prop="images">
                        <el-upload action="/api/tool/fileImport" list-type="picture-card"
                                   :headers="uploadHeaders"
                                   :data="uploadData"
                                   :file-list="this.applyForm.images"
                                   :on-success="(res, file, fileList)=>uploadSuccessHandle(res, fileList)"
                                   :before-upload="beforeUploadHandle">
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                                <img class="el-upload-list__item-thumbnail" :src="file.url" />
                                <span class="el-upload-list__item-actions">
<!--                        <span class="el-upload-list__item-preview" @click="previewImgBtn(file)">-->
                                    <!--                          <i class="el-icon-zoom-in"></i>-->
                                    <!--                        </span>-->
                        <span class="el-upload-list__item-delete" @click="delImgBtn(file)">
                          <i class="el-icon-delete"></i>
                        </span>
                    </span>
                            </div>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </el-row>
            <div style="width: 100%;position: absolute;bottom: 10px;padding: 8px;border-top: 1px #ebeef5 solid;">
                <el-button type="primary" @click="closeBtn" plain>退出</el-button>
                <el-button type="primary" @click="submitExtraBtn" :loading="btnLoading">{{btnLoading ? "申请中..." : "确认"}}</el-button>
            </div>
        </el-drawer>
    </section>
</template>

<script>

import {factoryList} from "@/api/produce/factory";
import {contractCancel, contractList, contractPushSignature, contractSignUrl, contractSubmit} from "@/api/soa/contract";
import processContract from "@/view/components/flow/processContract";
import {getToken} from "@/libs/util";
import {fineCreate} from "@/api/soa/fine";
import {extraCreate} from "@/api/soa/extra";

export default {
    name: "soa_cy_contract",
    components:{processContract},
    data() {
        return {
            tableHeight: window.innerHeight - 210,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],
            user: {},
            nodeActions: [],

            form: {processing_code: "", factory_contract_no: "", supplier_id: "", status: "", b_status: "", s_status: "", brand_code: ""},
            searchLoading: false,
            factoryList: [],

            approvalVisible: false,
            runId: "",
            contractId: "",

            detail: {processing_code_list: []},
            detailVisible: false,
            drawHeight: window.innerHeight - 150+"px",

            fineVisible:false,
            extraVisible: false,
            typeNo: [],
            applyForm: {images: []},
            applyFormRule: {
                type_no:[{ required: true, trigger: "blur" }],
                supplier_id: [{ required: true, trigger: "blur" }],
                reason: [{required: true, trigger: "blur"}],
                amount: [{required: true, trigger: "blur"}],
                remarks: [{required: true, trigger: "blur"}],
                purpose: [{required: true, trigger: "blur"}],
                price: [{required: true, trigger: "blur"}],
                num: [{required: true, trigger: "blur"}],
                tax_rate: [{required: true, trigger: "blur"}],
                images: [{required: true, trigger: "blur"}],
            },

            uploadHeaders: {},
            uploadData:{type: 'soa_cy_contract', disk: 'image'},
        }
    },
    watch:{
        // 监听路由参数的变化
        '$route.params.factory_contract_no': {
            immediate: true,
            handler(val) {
                if(!!val && val != this.form.factory_contract_no){
                    this.$set(this.form, 'factory_contract_no', val);
                    this.searchBtn();
                }
            }
        },
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
        if(this.user.source_from == 'gc'){//用户来源：工厂
            this.form.supplier_id = this.user.supplier_id;
        }
    },
    methods: {
        //搜索加工厂
        searchFactoryBtn(val){
            if(val == ""){
                return;
            }
            this.getFactoryData(val);
        },
        getFactoryData(name){
            factoryList({page: 1, limit: 200, tab: 1, factory_name: name, status: 0}).then((res) =>{
                this.factoryList = res.data.data;
            })
        },
        //搜索按钮
        searchBtn() {
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page) {
            this.page = page;
            this.getData();
        },
        //获取数据
        getData() {
            let param = {
                page: this.page,
                limit: this.limit
            };
            param = Object.assign(param, this.form);
            this.loading = true;
            contractList(param).then((res) => {
                this.loading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(() => {
                this.loading = false;
            });
        },
        //跳转
        linkTo(name, no){
            this.$router.push({
                name: name,
                params: {factory_contract_no: no}
            })
        },
        detailBtn(row){
            this.detail = JSON.parse(JSON.stringify(row));
            this.detailVisible = true;
        },
        //操作按钮
        dropdownBtn(command, row) {
            switch (command) {
                case "CANCEL"://作废
                    this.$confirm(`确定作废编号为${row.factory_contract_no}的合同？`, "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }).then(() => {
                        this.loading = true;
                        contractCancel({id: row.id}).then((res) => {
                            this.loading = false;
                            if (res.code === 0) {
                                this.$message.success("作废成功");
                                this.getData();
                            } else {
                                this.$message.error(res.msg);
                            }
                        }).catch(() => {
                            this.loading = false;
                        });
                    }).catch(()=>{

                    })
                    break;
                case "PDF"://查看合同附件
                    this.loading = true;
                    contractSignUrl({id: row.id}).then((res) =>{
                        this.loading = false;
                        if(res.code === 0){
                            window.open(res.data.url, '_blank');
                        }else{
                            this.$message.error(res.msg);
                        }
                    }).catch(()=>{
                        this.loading = false;
                    })
                    break;
                case "APPROVAL"://审批进度
                    this.runId = row.run_id;
                    this.contractId = row.id;
                    this.approvalVisible = true;
                    break;
                case "EQB"://重发签署
                    this.$confirm("请确认是否重新发起签署?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }).then(() => {
                        this.loading = true;
                        contractPushSignature({id: row.id}).then((res) =>{
                            this.loading = false;
                            if(res.code === 0){
                                this.$message.success("已重新发起签署, 请知悉合作方处理!!!");
                                this.getData();
                            }else{
                                this.$message.error(res.msg);
                            }
                        }).catch(()=>{
                            this.loading = false;
                        })
                    }).catch(()=>{

                    })
                    break;
            }
        },
        closeBtn(){
            this.contractId = "";
            this.runId = "";
            this.detail = {processing_code_list: []};
            this.applyForm = {images: []};
            this.approvalVisible = false;
            this.detailVisible = false;
            this.fineVisible = false;
            this.extraVisible = false;
        },
        //打开申请
        applyBtn(type, row){
            this.typeNo = row.type_no;
            if(type == 'fine'){
                this.fineVisible = true;
                this.applyForm = {
                    factory_contract_no:row.factory_contract_no,
                    type_no: "",
                    source_factory_groups_id: row.source_factory_groups_id,
                    order_processor: row.order_processor,
                    supplier_id: row.supplier_id,
                    factory_name: row.factory_name,
                    reason: "",
                    amount: "",
                    remarks:"",
                    images: []
                };
            }
            if(type == 'extra'){
                this.extraVisible = true;
                this.applyForm = {
                    factory_contract_no:row.factory_contract_no,
                    type_no: "",
                    source_factory_groups_id: row.source_factory_groups_id,
                    order_processor: row.order_processor,
                    supplier_id: row.supplier_id,
                    factory_name: row.factory_name,
                    purpose: "",
                    price: "",
                    num: "",
                    tax_rate: "",
                    tax_rate_price: "",
                    amount: "",
                    images: []
                };
            }
        },
        priceChange(){
            let amount = 0;
            let taxRatePrice = 0;
            if (this.applyForm.num && this.applyForm.price && this.applyForm.tax_rate) {
                amount = (Number(this.applyForm.price) * Number(this.applyForm.num) * (Number(this.applyForm.tax_rate)/100 + 1)).toFixed(2);
                taxRatePrice = (Number(this.applyForm.price) * Number(this.applyForm.num) * Number(this.applyForm.tax_rate)/100).toFixed(2);
            }
            this.$set(this.applyForm, 'amount', amount);
            this.$set(this.applyForm, 'tax_rate_price', taxRatePrice)
        },
        //提交申请--违约赔偿
        submitFineBtn(){
            if(!this.applyForm.supplier_id || !this.applyForm.factory_name || !this.applyForm.reason || !this.applyForm.amount || !this.applyForm.remarks
                || this.applyForm.images.length==0){
                this.$message.warning("必填信息不能为空!");return;
            }
            let obj = JSON.parse(JSON.stringify(this.applyForm));
            obj.images = [];
            this.applyForm.images.forEach(item =>{
                obj.images.push(item.response.data);
            })
            this.btnLoading = true;
            fineCreate(obj).then((res) =>{
                this.btnLoading = false;
                if(res.code === 0){
                    this.$message.success(res.msg);
                    this.closeBtn();
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(() =>{
                this.btnLoading = false;
            })
        },
        //提交申请--额外费用
        submitExtraBtn(){
            if(!this.applyForm.supplier_id || !this.applyForm.factory_name || !this.applyForm.purpose || !this.applyForm.price || !this.applyForm.num || !this.applyForm.tax_rate
                || !this.applyForm.amount || this.applyForm.images.length==0){
                this.$message.warning("必填信息不能为空!");return;
            }
            let obj = JSON.parse(JSON.stringify(this.applyForm));
            obj.images = [];
            this.applyForm.images.forEach(item =>{
                obj.images.push(item.response.data);
            })
            this.btnLoading = true;
            extraCreate(obj).then((res) =>{
                this.btnLoading = false;
                if(res.code === 0){
                    this.$message.success(res.msg);
                    this.closeBtn();
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(() =>{
                this.btnLoading = false;
            })
        },
        //提交合同审核
        submitContractBtn(row){
            this.$confirm(`提交编号${row.factory_contract_no}合同后将无法撤回，确定提交？`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.loading = true;
                contractSubmit({id: row.id}).then((res) =>{
                    this.loading = false;
                    if(res.code === 0){
                        this.$message.success("提交成功");
                        this.getData();
                    }else{
                        this.$message.error(res.msg);
                    }
                }).catch(()=>{
                    this.loading = false;
                })
            }).catch(()=>{

            })
        },

        //删除图片
        delImgBtn(file){
            let index;
            for(let i in this.applyForm.images){
                if(this.applyForm.images[i].uid == file.uid){
                    index = i;
                    break;
                }
            }
            if(index != undefined){
                this.applyForm.images.splice(index, 1);
            }
        },
        //上传之前的检测
        beforeUploadHandle(file) {
            if(!['image/jpg','image/jpeg','image/png'].includes(file.type)){
                this.$message.error('上传图片只能是 jpg、png 格式!');
                return false;
            }
            this.uploadHeaders.Authorization = 'Bearer '+ getToken();
            return true;
        },
        //上传成功
        uploadSuccessHandle(res, fileList) {
            if(res.code === 0){
                this.$set(this.applyForm, 'images', fileList);
            }else{
                this.$message.error("上传失败");
                fileList = fileList.filter(item => item.response && item.response.code === 0);
                this.$set(this.applyForm, 'images', fileList);
            }
        },
    },
    mounted() {
        this.getFactoryData("");
        this.searchBtn();
    }
}
</script>

<style scoped>
.ellipsis {
    overflow: hidden; /* 确保超出容器的内容被裁剪 */
    white-space: nowrap; /* 确保文本在一行内显示 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
}
</style>
